<template>
	<view class="form">
		<view class="opt">
			<input v-model="user.email" type="text" placeholder="请输入账号" class="inp">
		</view>

		<view class="opt opt-2">
			<input v-model="user.codeNum" class="inp inp-2" type="text" placeholder="请输入邮箱验证码">
			<button class="btn2" @click="sendEmailFn">{{msg}}</button>
		</view>

		<view class="opt">
			<input v-model="user.nickname" type="text" placeholder="请输入昵称" class="inp">
		</view>


		<view class="opt">
			<input v-model="user.password" type="password" placeholder="请输入密码" class="inp">
		</view>

		<view class="opt opt-1">
			<view class="left">
				<checkbox-group  >
					<label v-if="isAgree">
						<checkbox @click="changeCheckBox"  value="cb" checked="true" />
					</label>
					<label v-else>
						<checkbox @click="changeCheckBox"  value="cb" />
					</label>
				</checkbox-group>
			</view>
			<view class="right">
				我已阅读并同意<text class="txt">《服务协议》</text>和<text class="txt">《隐私协议》</text>
			</view>
		</view>

		<view class="opt">
			<!--  @click="registerFn" 绑定点击行为 -->
			<button @click="registerFn" class="btn">注册</button>
		</view>

		<view class="opt opt-2">
			<text class="tips">已有账号,</text>
			<navigator url="/pages/login/login" class="link">马上登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	
	// 导入验证码集合的引用
	import { verifysCollection , usersCollection } from '../../common/db/index.js'

	// 定义对象采集表单信息
	const user = reactive({
		email: "", // 邮箱账号
		password: "",
		nickname: "",
		register_date: ""
	})
	
	// 定义布尔值（判断用户是否阅读并同意服务协议等）
	let isAgree = false;

	// 定义发送邮件的提示
	const msg = ref("点击发送邮箱验证码")
	
	// 定义有效时间 60s
	let seconds = 60;
	
	// 定义定时器变量
	let timer = null;
	
	// 定义布尔值（判断是否已经发送验证码）
	let isSend = true;
	
	// 定义倒数秒数的方法
	const downTime = () => {
		// 执行间歇性定时器函数
		timer = setInterval( async ()=> {
			seconds --;
			// 给用户提示重新发送验证码
			msg.value = `还有${seconds}秒重新发送`
			
			if(seconds <=0) {
				// 停止执行定时器函数
				clearInterval(timer);
				// 给用户提示重新发送验证码
				msg.value = "点击重新发送验证码"
				// 重置一下倒数时间
				seconds = 10;
				// 重置布尔值为true
				isSend = true;
				// 删除验证码（60时间结束了）
				await verifysCollection.where({email: user.email, codeNum: user.codeNum})
				.remove()
			}
		},1000)
		// 设置间歇性执行的时间 1000毫秒  （秒）
	}

	// 编写发送邮件的方法
	const sendEmailFn = async () => {
		//用户邮件
		let email = user.email;
		// 判断用户邮箱是否为空
		if(email == "") {
			uni.showToast({
				title:"请输入账号",
				icon: "none"
			})
			return false;
		}
		
		// 判断邮箱格式是否正确
		if(!/\w{5,}@qq\.com$/.test(email)){
			uni.showToast({
				title:"请输入正确的qq邮箱",
				icon: "none"
			})
			return false;
		}
		
		if(isSend){
			// 发送了
			isSend = false;
			
			// 设置倒数秒数
			downTime();
			
			// 客户端调用云函数并传递参数
			await uniCloud.callFunction({
				name: 'mailqq',// 填写云函数名称
				data: {
					email: email,
				}
			})
			.then(res => {
				console.log("发送邮件的结果:",res);
				let result = res.result;
				if(result.code == 200) {
					// 提示
					// msg.value = "发送邮箱验证码成功";
					
				}
				else {
					msg.value = result.msg;
				}
			})
			.catch(
				err=> {
					console.log("发送失败:",err);
				}
			)
			
		}
		else {
			// 做弹窗提示
			uni.showToast({
				title:"验证码已经发送",
				icon:"none"
			})
		}
	}

	// 编写注册账号的方法
	const registerFn = async () => {
		// console.log("布尔值:",isAgree)
		// 先判断用户是否阅读并同意协议
		if(!isAgree) {
			uni.showToast({
				title:"您还没勾选平台协议~~",
				icon: "none"
			})
			// 终止代码
			return false;
		}
		
		// 首先获取表单信息
		let {email , password , nickname , codeNum} = user;
		// console.log({email , password , nickname , codeNum});
		
		// 判断表单输入框是否为空
		if(email == "" || password == "" || nickname == "" ||codeNum == ""){
			uni.showToast({
				title:"缺少参数，输入框不能为空~~",
				icon: "none"
			})
			return false;
		}
		
		
		// 记录邮箱验证是否通过的
		let isPass = false;
		
		// 验证邮箱和验证码是否一致
		await verifysCollection.where({email: email, codeNum: codeNum})
		.get()
		.then(
		    res=> {
				// console.log("查询的结果:",res);
				let result = res.result;
				console.log(result)
				if(result.data.length == 1) {
					isPass = true;
				}
			}
		)
		
		// 记录用户账号是否已经存在
		let isExit = true;
		
		// 先查询云数据库是否存在该账号
		await usersCollection.where({email: email})
		.get()
		.then(
		    res=> {
				// console.log("查询的结果:",res);
				let result = res.result;
				if(result.data.length == 1) {
					uni.showToast({
						title:"该账号已经存在~~",
						icon: "none"
					})
					isExit = false;
				}
			}
		)
		
		// 根据布尔值 isExit 
		if(isExit) {
			// 把用户信息添加到云数据库中
			let register_date = new Date().getTime();
			await usersCollection.add({email , password , nickname,register_date})
			.then(
				async (res)=>{
					// console.log("添加的结果:", res);
					let result = res.result;
					if(result.errCode === 0) {
						uni.showToast({
							title:"注册成功",
							icon:'success'
						})
						// 注册成功 也要删除验证码
						await verifysCollection.where({email: user.email, codeNum: user.codeNum})
						.remove()
						
						// 延迟300毫秒，跳转到登录页
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/login/login'
							})
						},300)
					}
					else {
						uni.showToast({
							title:"注册失败",
							icon:'error'
						})
						// 注册失败 要删除验证码
						await verifysCollection.where({email: user.email, codeNum: user.codeNum})
						.remove()
					}
				}
			)
		}
	}
	
	// 设置复选框的布尔值
	const changeCheckBox = (event)=> {
		// console.log(isAgree)
		if(isAgree) {
			isAgree = false;
		}
		else {
			isAgree = true;
		}
	}
</script>

<style lang="scss">
	@import '../../uni.scss';

	.form {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.opt-2 {
			width: 100%;
			display: flex;

			.inp-2 {
				width: 260rpx !important;
				border: 0 !important;
				border-bottom: 1px solid #ccc !important;
				border-radius: 0rpx !important;
			}
		}

		.opt {
			width: 100%;
			margin-top: 30rpx;

			.btn2 {
				background-color: transparent;
				font-size: 32rpx;

				&::after {
					border: 0;
				}
			}

			.inp {
				height: 90rpx;
				width: 100%;
				border: 1px solid #ccc;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}

			.btn {
				background-color: $bg_btn_color;
				color: #fff;
			}

			.cbx {
				width: 30rpx;
				height: 30rpx;
			}

			.txt {
				font-size: 30rpx;
				color: #ff5500;
			}
		}

		.opt-1 {
			display: flex;
			align-items: center;

			.left {
				width: 40rpx;
			}

			.right {
				width: calc(100% - 40rpx);
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}

		.opt-2 {
			.tips {
				float: left;
				color: #666;
			}

			.link {
				float: left;
				margin-left: 30rpx;
			}
		}
	}
</style>